<template>
  <div class="login">
    <div class="form">
      <div class="phone">
        <span class="prev">+86</span>
        <input type="text" placeholder="请输入手机号码" class="inner" maxlength="11" v-model.trim.number="params.phone">
      </div>
      <div class="code">
        <span class="next" @click="getCode" :class="{disable: countGetCode > 0}">{{countGetCode <= 0 ? '获取验证码' : `${countGetCode}秒后再次获取`}}</span>
        <input type="text" class="inner" maxlength="6" placeholder="请输入验证码" v-model.trim="params.verifycode">
      </div>
      <div class="sure" @click="login" :class="{disable: true}">登录</div>
      <div class="tips">未注册过的手机号默认注册</div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex';

  export default {
    name: "Login",
    data() {
      return {
        urlParams: {},
        wx_code: '',
        title: '',
        appUrl: '',
        params: {
          uid: '',
          phone: '',
          verifycode: '',
          verifycode_id: '',
          unionid: '',
          openid: '',
          realname: '',
          icon: '',
          content: ''
        },
        timer: null,
        clicked: false,
        urlData: {},
        testPhone: /^1\d{10}$/,
        countGetCode: 0
      }
    },
    computed: {
      ...mapGetters([
        'wxUserInfo',
        'productInfo',
        'userInfo',
      ])
    },
    watch: {},
    created() {
      if (this.userInfo.uid) return this.gotoPath();
      this.util.checkWxToken(this);
    },
    methods: {
      ...mapMutations([
        'setWxUserInfo',
        'setUserInfo'
      ]),
      gotoPath() {
        let path = this.$route.query.router;
        if (path) {
          this.$router.replace(path);
        } else {
          this.$router.go(-1);
        }
      },
      //登录
      login() {
        if (this.isDevTest && this.isDevTest() === 1) return this.gotoPath();
        let {phone, verifycode_id, verifycode, unionid, openid, realname, icon, content} = this.params;
        if (!this.testPhone.test(phone)) {
          return this.$toast('请输入正确手机号码');
        }
        if (!verifycode_id) {
          return this.$toast('请先获取验证码');
        }
        // content = JSON.stringify(content);
        let parmas = {
            phone,
            verifycode,
            verifycode_id,
            unionid,
            openid,
            realname,
            icon,
            content
          },
          url = 'wxcat/api/login';
        let register = false;
        if (this.$route.query.register) {
          parmas = Object.assign(parmas, this.productInfo, {
            is_get_reward: 1,
            share_id: 1,
            uid: this.$route.query.uid,
          });
          url = 'wxcat/api/register';
          register = true;
        }
        if (this.clicked) return;
        this.clicked = true;
        this.http.$post(url, parmas).then(res => {
          this.setUserInfo({uid: res.uid});
          this.wxUserInfo.is_register = 1;
          this.setWxUserInfo(this.wxUserInfo);
          this.$toast.success(register ? '注册成功' : '登录成功');
          this.clicked = false;
          this.$store.commit('setIsBack', register);
          setTimeout(() => {
            this.countGetCode = 0;
            clearInterval(this.timer);
            this.timer = null;
            this.gotoPath();
          }, 2000);
        }).catch(err => {
          this.clicked = false;
          let res = err.data || {};
          switch (err.code * 1) {
            case 10135:
              this.http.$post('api/user/bind_phone', {
                uid: res.uid,
                verifycode,
                verifycode_id,
                phone
              }).then(res => {
                this.$toast.success('登录成功！');
                this.setUserInfo({uid: err.data.uid});
                setTimeout(() => {
                  this.countGetCode = 0;
                  clearInterval(this.timer);
                  this.timer = null;
                  this.gotoPath();
                }, 2000);
              }).catch(this.$err);
              break;
            case 10134:
              this.setUserInfo({uid: res.uid});
              this.$dialog.confirm({
                title: '提示',
                message: `登录失败！登录手机号与绑定手机号不一致，请使用${res.phone}重新登录`,
              }).then(() => {
                this.params.phone = res.phone;
                this.params.verifycode = '';
                this.params.verifycode_id = '';
                this.countGetCode = 0;
                clearInterval(this.timer);
                this.timer = null;
              }).catch();
              break;
            default:
              this.$err(err);
          }
        });
      },

      //发送短信
      getCode() {
        if (this.countGetCode > 0) return;
        let {phone} = this.params;
        if (!this.testPhone.test(phone)) {
          return this.$toast('请输入正确手机号码');
        }
        this.countGetCode = 60;
        this.timer = setInterval(e => {
          this.countGetCode--;
          if (this.countGetCode <= 0) {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
        this.http.$post('api/user/get_phone_code', {phone}).then(res => {
          this.params.verifycode_id = res.verifycode_id;
        }).catch(err => {
          this.$err(err);
        });
      },
    },

  }
</script>

<style scoped lang="less">
  .login {
    box-sizing: border-box;
    background-color: #fff;
    padding-top: 3.87rem;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    font-size: 1rem;
    text-align: center;
    color: #fff;

    .disable {
      opacity: .6;
    }

    .logo {
      position: absolute;
      top: 2.44rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .icon {
      margin-bottom: .56rem;
      vertical-align: middle;
      width: 4.19rem;
      height: 4.19rem;
    }

    .text {
      white-space: nowrap;
    }

    .form {
      margin: 0 auto;
      width: 89.33%;
      max-width: 18.75rem;
    }

    .phone,
    .code {
      text-align: left;
      height: 3.78rem;
      line-height: 3.7rem;
      font-size: .88rem;
      border-bottom: .03rem solid #dedede;
      color: #333;
    }

    .code {
      margin-bottom: 2.5rem;
    }

    .form .inner {
      max-width: 50%;
    }

    .prev {
      margin-right: .5rem;
      padding-right: .5rem;
      border-right: solid #e8e8e8 .06rem;
    }

    .next {
      float: right;
      text-align: center;
      margin-top: .84rem;
      min-width: 5.94rem;
      height: 2.06rem;
      line-height: 2.06rem;
      color: #fff;
      background-color: #0f82ff;
      border-radius: 1.03rem;
    }
    .next.disable {
      background-color: #137df0;
    }

    .sure {
      height: 2.81rem;
      line-height: 2.81rem;
      background-image: linear-gradient(90deg, #3495ff, #228cff, #0f82ff);
      border-radius: 0.31rem;
    }

    .sure.disable {
      background-image: linear-gradient(90deg, #338ff3, #2286f2, #107cf1);
    }

    .tips {
      margin-top: 1.25rem;
      font-size: .88rem;
      color: #666;
    }
  }
</style>
